<template>
	<view class="" v-show="showMain">
		<view class="shopOrderDetail mainpadding mainbgc" style="padding-bottom:180rpx;">
			<!-- 等待买家付款：-->
			<view class="" v-if="orderinfo.state==1">
				<view class="ticketDetailsTitle">等待买家付款</view>
				<view class="surplusTime">剩余{{orderinfo.itemend}}自动关闭</view>
			</view>
			<!-- 等待商家发货：-->
			<view class="" v-if="orderinfo.state==2 && orderinfo.buy_type==2">
				<view class="ticketDetailsTitle">等待商家发货</view>
				<view class="surplusTime">请您耐心等待商家发货~</view>
			</view>
			<!-- 备货中 -->
			<view class="" v-if="orderinfo.state==2 && orderinfo.buy_type==1">
				<view class="ticketDetailsTitle">商家火速备货中</view>
				<view class="surplusTime">请耐心等待~</view>
			</view>
			<!-- 等待买家收货：-->
			<view class="" v-if="orderinfo.state==3 && orderinfo.buy_type==2">
				<view class="ticketDetailsTitle">等待买家收货</view>
				<view class="surplusTime"></view>
			</view>
			<!-- 等待自提 -->
			<view class="" v-if="orderinfo.state==3 && orderinfo.buy_type==1">
				<view class="ticketDetailsTitle">待自提</view>
				<view class="surplusTime">商家备货完成，等待自提</view>
			</view>
			<!-- 已完成：-->
			<view class="" v-if="orderinfo.state==6 || orderinfo.state==4">
				<view class="ticketDetailsTitle">已完成</view>
				<view class="surplusTime">感谢您的支持，期待下次购买！</view>
			</view>
			<view class="" v-if="orderinfo.state==7">
				<view class="ticketDetailsTitle">订单已取消</view>
				<view class="surplusTime"></view>
			</view>
			<view class="" v-if="orderinfo.state==8">
				<view class="ticketDetailsTitle">审核中</view>
				<view class="surplusTime">取消订单审核中，请耐心等待</view>
			</view>
			<view class="nameAadd mainpadding ffffff border-r1 margin-top">
				<view class="name">{{orderinfo.address.name}}</view>
				<text class="name tel">{{orderinfo.address.mobile}}</text>
				<view class="address">{{orderinfo.address.address}}</view>
			</view>
			<view class="mainpadding ffffff border-r1 margin-top">
				<view class="add">订单编号：{{orderinfo.order_no}}</view>
				<view class="margin-top minute-box" v-for="item1 in orderinfo.goods" :key="item1.id">
					<view class="img border-r2 margin-right">
						<image :src="item1.image_text" mode=""></image>
					</view>
					<view class="minute flex1">
						<view class="mT">{{item1.title}}</view>
						<view class="mT2">{{item1.difference}}</view>
						<view class="flexleft2">
							<text class="tMoney">￥{{item1.price}}</text>
							<text class="tCount">x{{item1.number}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单详细信息：-->
			<view class="detailInfo mainpadding margin-top ffffff border-r1">
				<view class="flexleft2">
					<view class="it2">商品总价</view>
					<view class="it">￥{{orderinfo.total_goods_price}}</view>
				</view>
				<view class="flexleft2 margin-top" v-if="orderinfo.score!==0">
					<view class="it2">积分抵扣</view>
					<!-- <view class="it">￥{{allowscorePrice}}</view> -->
					<view class="it">￥{{orderinfo.integral_price}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">实际支付</view>
					<view class="it" style="color: #FD463E; font-weight: 800;">￥{{orderinfo.pay_price}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">运费</view>
					<view class="it">￥{{orderinfo.freight_price}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">订单编号</view>
					<view class="it">{{orderinfo.order_no}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">创建时间</view>
					<view class="it">{{orderinfo.createtime_text}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">支付方式</view>
					<view class="it">{{orderinfo.pay_type_text}}</view>
				</view>
				<view class="flexleft2 margin-top">
					<view class="it2">备注</view>
					<view class="it">{{orderinfo.remarks}}</view>
				</view>
			</view>
		</view>
		<!-- 按钮： -->
		<view class="btn-box flexleft ffffff mainpadding">
			<view class="btnS2" @click="gopay" v-if="orderinfo.state==1">立即支付</view>
			<view class="btnS1" v-if="orderinfo.state==1 || orderinfo.state==2" @click="cancleorder(orderinfo)">取消订单
			</view>
			<view class="btnS1" @click="delorder" v-if="orderinfo.state==6 || orderinfo.state==7">删除订单</view>
			<view class="btnS1" v-if="orderinfo.state==3 && orderinfo.buy_type==2" @click="showmodel">查看物流</view>
			<view class="btnS2" v-if="orderinfo.state==3 && orderinfo.buy_type==2" @click="suresh(orderinfo)">确认收货
			</view>
			<view class="btnS2" v-if="orderinfo.state==3 && orderinfo.buy_type==1" @click="suresh(orderinfo)">确认自提
			</view>
		</view>
		<!-- 弹层：-->
		<view class="popUp">
			<u-modal :show="show" title="物流单号" :closeOnClickOverlay="true" @confirm="copydingdanhao(orderinfo.order_no)"
				confirmText="点击复制" :showConfirmButton="true" @close="close" :slots="confirmButton">
				<view class="slot-content mainpadding">
					<rich-text :nodes="content1"></rich-text>
					<rich-text :nodes="content2"></rich-text>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				orderinfo: {},
				allowscorePrice: '', // 积分抵扣金额
				orderid: '',
				show: false,
				content1: `中通快递`,
				content2: ` 22212314465432123456423`,
				confirmButton: '66',
				showMain: false,
				timer: null
			}
		},
		onLoad(options) {
			this.orderid = options.id
			this.initOrder()
		},
		onUnload() {
			clearInterval(this.timer)
		},
		methods: {
			// 确认收货
			suresh(item) {
				httpRequest.modal('', '请再次确认', true, (res) => {
					if (res) {
						httpRequest.request('api/goodsorder/confirmOrder', 'POST', {
							id: item.id,
						}, false, false, false).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								this.initOrder()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			//取消订单
			cancleorder(item) {
				let _this = this
				httpRequest.modal('提示', '确认取消订单？', true, (res) => {
					if (res) {
						httpRequest.request('api/goodsorder/cancelOrder', 'POST', {
							order_id: item.id,
						}, false, false, false).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								this.initOrder()
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}

				})
			},
			initOrder() {
				let _this = this;
				httpRequest.request('/api/goodsorder/getOrderInfo', 'POST', {
					id: _this.orderid
				}, false, false, false).then(res => {
					this.showMain = true
					if (res.code == 1) {
						this.orderinfo = res.data
						if (this.orderinfo.state != 7) {
							this.$set(this.orderinfo, "itemend", "")
							this.orderinfo.itemend = this.djstime(this.orderinfo.expire_tme)
							this.timer = setInterval(() => {
								this.orderinfo.itemend = this.djstime(this.orderinfo.expire_tme)
							}, 1000)
						}
						this.scoreToPrice(this.orderinfo.allow_score)
						console.log(this.orderinfo)
					}
				}).catch(err => {
					this.showMain = true
					httpRequest.toast(err.msg);
				})
			},
			// 积分抵扣换算
			scoreToPrice(data) {
				httpRequest.request('api/user/scoreToPrice', 'GET', {
					allow_score: data
				}, false, false, true).then(res => {
					// console.log(res);
					this.allowscorePrice = res.data.price
				})
			},
			djstime(endTime) {
				let startTime = (Date.parse(new Date())) / 1000;
				// var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				// if (timestamp < startTime) {
				date1 = startTime;
				// } else {
				// date1 = timestamp; //开始时间
				// }
				var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数
				console.log(date3, "时间")
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));

				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.ceil(leave2 / (60 * 1000));
				console.log(leave2 / (60 * 1000), "分钟")
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				if (hours < 0) {
					hours = 0
				}
				if (minutes < 0) {
					minutes = 0
				}
				if (hours < 10) {
					hours = "0" + hours
				}
				if (minutes < 10) {
					minutes = "0" + minutes
				}
				if (seconds < 10) {
					seconds = "0" + seconds
				}
				if (minutes == 0) {
					clearInterval(this.timer)
				}
				return hours + "小时" + minutes + "分钟"
			},

			//删除订单
			delorder() {
				let _this = this
				httpRequest.modal('提示', '确认删除订单', true, (res) => {
					if (res) {
						httpRequest.request('/api/goodsorder/delOrder', 'POST', {
							id: _this.orderid,
						}, false, false, false).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
			//立即支付
			gopay() {
				let _this = this
				let data = {
					id: _this.orderinfo.order_pay_no,
					pay_price: _this.orderinfo.total_price,
					type: 3,
					allscore: _this.orderinfo.allow_score
				}
				uni.navigateTo({
					url: '/pages/hotel/hotelorder?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			//弹出
			showmodel() {
				let _this = this
				_this.show = true
			},
			//复制订单号
			copydingdanhao(content) {
				console.log(1)
				let _this = this
				uni.setClipboardData({
					data: content,
					success() {
						httpRequest.toast("复制成功")
					}
				})
				_this.show = false
			},
			close() {
				this.show = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.ticketDetailsTitle {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.surplusTime {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 7rpx;
	}

	.name {
		display: inline-block;
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.tel {
		margin-left: 50rpx;
	}

	.address {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-top: 7rpx;
	}

	.add {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.minute-box {
		display: flex;
	}

	.img {
		width: 124rpx;
		height: 124rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.mT {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.mT2 {
		margin: 12rpx 0;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.tMoney {
		font-size: 30rpx;
		font-family: DIN Next LT Pro-Bold, DIN Next LT Pro;
		font-weight: bold;
		color: #FD463E;
	}

	.tCount {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.it {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.it2 {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.btn-box {
		display: flex;
		flex-direction: row-reverse;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.btnS1 {
		padding: 8rpx 30rpx;
		border: 2rpx solid #666666;
		border-radius: 30rpx;
		margin-left: 25rpx;
	}

	.btnS2 {
		padding: 8rpx 30rpx;
		border-radius: 30rpx;
		margin-left: 25rpx;
		color: #00D2E1;
		border: 2rpx solid #00D2E1;
	}
</style>